<template>
  <div class="button-document">
    <div style="padding: 8px; margin: 8px 0">
      <div style="font-size: 28px; font-weight: 500; margin-bottom: 16px">Button按钮</div>
      <span>按钮用于开始一个即时操作。</span>
    </div>
    <div class="button-document-code">
      <div class="button-document-code-title">代码演示</div>
      <div class="button-document-code-content">
        <div class="button-document-code-content-item">
          <CodeCard :description="codeDes[0].description" :code="codeDes[0].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Button type="primary">Primary Button</Button>
              <Button>Default Button</Button>
              <br />
              <Button type="dashed">Dashed Button</Button>
              <Button type="text">Text Button</Button>
              <Button type="link">Link Button</Button>
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[2].description" :code="codeDes[2].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Button disabled>Default(Disabled)</Button>
              <Button type="primary" disabled>Primary(Disabled)</Button>
              <br />
              <Button type="dashed" disabled>Dashed(Disabled)</Button>
              <Button type="text" disabled>Text(Disabled)</Button>
              <Button type="link" disabled>Link(Disabled)</Button>
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[3].description" :code="codeDes[3].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0; background-color: rgb(190, 200, 200)">
              <Button ghost>Default(ghost)</Button>
              <Button type="primary" ghost>Primary(ghost)</Button>
              <br />
              <Button type="dashed" ghost>Dashed(ghost)</Button>
              <Button type="text" ghost>Text(ghost)</Button>
              <Button type="link" ghost>Link(ghost)</Button>
            </div>
          </CodeCard>
        </div>
        <div class="button-document-code-content-item">
          <CodeCard :description="codeDes[1].description" :code="codeDes[1].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Button size="large">Large</Button>
              <Button size="middle">Middle</Button>
              <Button size="mini">Mini</Button>
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[3].description" :code="codeDes[3].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Button danger>Default(Danger)</Button>
              <Button type="primary" danger>Primary(Danger)</Button>
              <br />
              <Button type="dashed" danger>Dashed(Danger)</Button>
              <Button type="text" danger>Text(Danger)</Button>
              <Button type="link" danger>Link(Danger)</Button>
            </div>
          </CodeCard>
        </div>
      </div>
    </div>
    <div style="padding: 8px">
      <div style="font-size: 24px">API</div>
      <section class="easy-markdown">
        <table>
          <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
              <th>类型</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>type</td>
              <td>设置按钮类型</td>
              <td>String</td>
              <td>default</td>
            </tr>
            <tr>
              <td>size</td>
              <td>设置按钮大小</td>
              <td>String</td>
              <td>middle</td>
            </tr>
            <tr>
              <td>disabled</td>
              <td>按钮失效状态</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>danger</td>
              <td>设置危险按钮</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>ghost</td>
              <td>幽灵属性，使按钮背景透明</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Button from '/@/components/Button/index.vue'
import CodeCard from '/@/components/CodeCard/index.vue'

export default defineComponent({
  name: 'ButtonDocument',
  components: {
    Button,
    CodeCard,
  },
  setup() {
    const codeDes: Array<Record<string, string>> = [
      {
        description:
          '按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。',
        code: '这是一段代码',
      },
      {
        description:
          '按钮有大、中、小三种尺寸。通过设置 size 为 large、small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。',
        code: '这是一段代码',
      },
      {
        description: '添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变',
        code: '这是一段代码',
      },
      {
        description:
          '按钮有大、中、小三种尺寸。通过设置 size 为 large、small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。',
        code: '这是一段代码',
      },
    ]
    function handleClick() {
      console.log('handleClick')
    }
    return {
      codeDes,
      handleClick,
    }
  },
})
</script>

<style lang="scss">
.button-document {
  margin: 0 0 0 40px;
  &-code {
    &-title {
      font-size: 24px;
      padding: 8px;
    }
    &-content {
      display: flex;
      flex-wrap: wrap;
      &-item {
        margin: 8px;
        flex: 1;
      }
    }
  }
}
</style>
